<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
   <section v-if="loginStatus">
       输入您的姓名：<input type="text" v-model="name">
       <button @click="say">欢迎点击</button>
       <button @click="switchLoginStatus">退出登录</button>
   </section>
<br>
    <section  v-if="!loginStatus">
        登录用户：<input type="text">
        登录密码：<input type="password">
        <button @click="switchLoginStatus">登录</button>
    </section>
</div>

<script>
    var V=new Vue({
        el:'#app',
        data:{
            name:'',
            loginStatus:false

        },
        methods:{
            say:function(){
              alert('欢迎'+this.name);
            },
            switchLoginStatus:function(){
              this.loginStatus=!this.loginStatus;
            }
        }
    })
</script>
</body>
</html>